<template>
  <a-layout class="home-page">
    <a-layout-sider
      breakpoint="lg"
      collapsed-width="0"
      class="sider-bar"
    >
      <div class="logo" />
      <a-menu theme="dark" mode="inline" v-model="currentMenu">
        <a-menu-item v-for="item in menuList" :key="item.path">
          <router-link :to="{name:item.path}">
            <a-icon :type="item.icon"/>
            <span class="nav-text">{{item.name}}</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout class="main">
      <a-layout-header class="header">
        <div class="wrapper u-flex u-row-right">
          <span class="user-name">admin</span>
          <a-icon type="poweroff" @click="logout" />
        </div>
      </a-layout-header>
      <a-layout-content class="content" :style="{ margin: '24px 16px 0' }">
        <div class="wrapper">
          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer class="footer" style="textAlign: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>

     <a-modal
      title="提示"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p>确定退出登录?</p>
    </a-modal>
  </a-layout>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
  },
  data(){
    return {
      visible:false,
      currentMenu:[],
      menuList:[
        {name:"人员管理",path:"person",icon:"user"},
        {name:"厂区管理",path:"factory",icon:"home"},
        {name:"进出厂记录",path:"record",icon:"car"},
        {name:"二维码管理",path:"qrcode",icon:"barcode"},
      ]
    }
  },
  created(){
    this.currentMenu=[this.$route.name];
  },
  methods:{
    clickMenu({item,key,keyPath}){
      console.log(item,key,keyPath)
    },
    logout(){
      this.visible=true;
    },
    handleOk(){
      this.visible=false;
      this.$router.push({
        name:'login'
      });
    },
    handleCancel(){
      this.visible=false;
    }
  }
}
</script>

<style lang="scss" scoped>
.home-page{
  height: 100vh;
  background: rgba(255, 255, 255, 0.2);
  .logo{
    background:url("../assets/logo.png");
    height: 100px;
    background-repeat: no-repeat;
  }
  .main{
    .header{
      background: #fff;
      padding: 0;
      padding-right: 20px;
      .wrapper{
        height:100%;
        .user-name{
          margin-right: 20px;
        }
      }
    }
    .content{
      height: calc(100% - 130px);
      .wrapper{
        height: 100%;
        padding: 24px;
        background: #fff;
      }
    }
    .footer{
      height: 64px;
    }
  }
}
</style>
